<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { reactive } from "vue";
import Vue3CronCore from "./components/vue3-cron-core/Index.vue";
const state = reactive({
  cron: "* * * * * ? *",
});
const changeCron = (val) => {
  if (typeof val !== "string") return false;
  state.cron = val;
};
</script>

<template>
  <div style="text-align: center">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div style="padding: 24px">生成值： <input type="text" v-model="state.cron" /></div>
  </div>
  <div class="app-content">
    <div style="flex: 0.3"></div>
    <!-- 使用组件例子 -->
    <Vue3CronCore i18n="cn" maxHeight="350px" @change="changeCron" v-model:value="state.cron" style="flex: 0.4" />
    <div style="flex: 0.3"></div>
  </div>
</template>

<style>
#app {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #ffffff;
}

.app-content {
  display: flex;
}
</style>
